:root {
  --color-logo: #282467;

  /* NEUTRALS */

  --color-neutral-txt-primary: #1a1b38;
  --color-neutral-txt-secondary: #5a5b6c;

  --color-neutral-background-primary: #ffffff;
  --color-neutral-background-secondary: #f8f8f8;
  --color-neutral-background-disabled: #e4e4e7;

  --color-neutral-border: #d0d0d5;

  /* OPACITY */

  --color-opacity-primary: #1a1b3833;

  /* BRAND */

  --color-brand-txt-base: #6b63bf;
  --color-brand-txt-hover: color-mix(in srgb, #000000 20%, var(--color-brand-txt-base));
  --color-brand-txt-active: color-mix(in srgb, #000000 40%, var(--color-brand-txt-base));

  --color-brand-background-selected: color-mix(in srgb, #ffffff 90%, var(--color-brand-item-base));
  --color-brand-background-hover: color-mix(in srgb, #ffffff 80%, var(--color-brand-item-base));
  --color-brand-background-active: color-mix(in srgb, #ffffff 70%, var(--color-brand-item-base));

  --color-brand-txt-item: #030029;
  --color-brand-item-base: #8f84ff;
  --color-brand-item-hover: color-mix(in srgb, #ffffff 20%, var(--color-brand-item-base));
  --color-brand-item-active: color-mix(in srgb, #ffffff 40%, var(--color-brand-item-base));
  --color-brand-item-disabled: #d2ceff;

  /* INFO */

  --color-info-txt-base: #1f76af;
  --color-info-txt-hover: color-mix(in srgb, #000000 20%, var(--color-info-txt-base));
  --color-info-txt-active: color-mix(in srgb, #000000 40%, var(--color-info-txt-base));

  --color-info-background-selected: color-mix(in srgb, #ffffff 90%, var(--color-info-item-base));
  --color-info-background-hover: color-mix(in srgb, #ffffff 80%, var(--color-info-item-base));
  --color-info-background-active: color-mix(in srgb, #ffffff 70%, var(--color-info-item-base));

  --color-info-txt-item: #041018;
  --color-info-item-base: #2ca3f2;
  --color-info-item-hover: color-mix(in srgb, #ffffff 20%, var(--color-info-item-base));
  --color-info-item-active: color-mix(in srgb, #ffffff 40%, var(--color-info-item-base));
  --color-info-item-disabled: #abdafa;

  /* SUCCESS */

  --color-success-txt-base: #217e5a;
  --color-success-txt-hover: color-mix(in srgb, #000000 20%, var(--color-success-txt-base));
  --color-success-txt-active: color-mix(in srgb, #000000 40%, var(--color-success-txt-base));

  --color-success-background-selected: color-mix(in srgb, #ffffff 90%, var(--color-success-item-base));
  --color-success-background-hover: color-mix(in srgb, #ffffff 80%, var(--color-success-item-base));
  --color-success-background-active: color-mix(in srgb, #ffffff 70%, var(--color-success-item-base));

  --color-success-txt-item: #092017;
  --color-success-item-base: #2ca878;
  --color-success-item-hover: color-mix(in srgb, #ffffff 20%, var(--color-success-item-base));
  --color-success-item-active: color-mix(in srgb, #ffffff 40%, var(--color-success-item-base));
  --color-success-item-disabled: #abdcc9;

  /* WARNING */

  --color-warning-txt-base: #aa5b11;
  --color-warning-txt-hover: color-mix(in srgb, #000000 20%, var(--color-warning-txt-base));
  --color-warning-txt-active: color-mix(in srgb, #000000 40%, var(--color-warning-txt-base));

  --color-warning-background-selected: color-mix(in srgb, #ffffff 90%, var(--color-warning-item-base));
  --color-warning-background-hover: color-mix(in srgb, #ffffff 80%, var(--color-warning-item-base));
  --color-warning-background-active: color-mix(in srgb, #ffffff 70%, var(--color-warning-item-base));

  --color-warning-txt-item: #261403;
  --color-warning-item-base: #ef7f18;
  --color-warning-item-hover: color-mix(in srgb, #ffffff 20%, var(--color-warning-item-base));
  --color-warning-item-active: color-mix(in srgb, #ffffff 40%, var(--color-warning-item-base));
  --color-warning-item-disabled: #f9cca3;

  /* DANGER */

  --color-danger-txt-base: #a11d1d;
  --color-danger-txt-hover: color-mix(in srgb, #000000 20%, var(--color-danger-txt-base));
  --color-danger-txt-active: color-mix(in srgb, #000000 40%, var(--color-danger-txt-base));

  --color-danger-background-selected: color-mix(in srgb, #ffffff 90%, var(--color-danger-item-base));
  --color-danger-background-hover: color-mix(in srgb, #ffffff 80%, var(--color-danger-item-base));
  --color-danger-background-active: color-mix(in srgb, #ffffff 70%, var(--color-danger-item-base));

  --color-danger-txt-item: #fff0f1;
  --color-danger-item-base: #be1621;
  --color-danger-item-hover: color-mix(in srgb, #000000 20%, var(--color-danger-item-base));
  --color-danger-item-active: color-mix(in srgb, #000000 40%, var(--color-danger-item-base));
  --color-danger-item-disabled: #e5a2a6;
}

:root.dark {
  --color-logo: #e5e5e7;

  /* NEUTRALS */

  --color-neutral-txt-primary: #f8f8f8;
  --color-neutral-txt-secondary: #bfbfc6;

  --color-neutral-background-primary: #111225;
  --color-neutral-background-secondary: #000000;
  --color-neutral-background-disabled: #4b4c5b;

  --color-neutral-border: #363647;

  /* OPACITY */

  --color-opacity-primary: #1a1b3899;

  /* BRAND */

  --color-brand-txt-base: #9b92ff;
  --color-brand-txt-hover: color-mix(in srgb, #ffffff 20%, var(--color-brand-txt-base));
  --color-brand-txt-active: color-mix(in srgb, #ffffff 40%, var(--color-brand-txt-base));

  --color-brand-background-selected: color-mix(in srgb, #000000 70%, var(--color-brand-item-base));
  --color-brand-background-hover: color-mix(in srgb, #000000 60%, var(--color-brand-item-base));
  --color-brand-background-active: color-mix(in srgb, #000000 50%, var(--color-brand-item-base));

  --color-brand-txt-item: #030029;
  --color-brand-item-base: #8f84ff;
  --color-brand-item-hover: color-mix(in srgb, #ffffff 20%, var(--color-brand-item-base));
  --color-brand-item-active: color-mix(in srgb, #ffffff 40%, var(--color-brand-item-base));
  --color-brand-item-disabled: #393566;

  /* INFO */

  --color-info-txt-base: #2ca3f2;
  --color-info-txt-hover: color-mix(in srgb, #ffffff 20%, var(--color-info-txt-base));
  --color-info-txt-active: color-mix(in srgb, #ffffff 40%, var(--color-info-txt-base));

  --color-info-background-selected: color-mix(in srgb, #000000 70%, var(--color-info-item-base));
  --color-info-background-hover: color-mix(in srgb, #000000 60%, var(--color-info-item-base));
  --color-info-background-active: color-mix(in srgb, #000000 50%, var(--color-info-item-base));

  --color-info-txt-item: #041018;
  --color-info-item-base: #2ca3f2;
  --color-info-item-hover: color-mix(in srgb, #ffffff 20%, var(--color-info-item-base));
  --color-info-item-active: color-mix(in srgb, #ffffff 40%, var(--color-info-item-base));
  --color-info-item-disabled: #124161;

  /* SUCCESS */

  --color-success-txt-base: #2ca878;
  --color-success-txt-hover: color-mix(in srgb, #ffffff 20%, var(--color-success-txt-base));
  --color-success-txt-active: color-mix(in srgb, #ffffff 40%, var(--color-success-txt-base));

  --color-success-background-selected: color-mix(in srgb, #000000 70%, var(--color-success-txt-base));
  --color-success-background-hover: color-mix(in srgb, #000000 60%, var(--color-success-txt-base));
  --color-success-background-active: color-mix(in srgb, #000000 50%, var(--color-success-txt-base));

  --color-success-txt-item: #092017;
  --color-success-item-base: #2ca878;
  --color-success-item-hover: color-mix(in srgb, #ffffff 20%, var(--color-success-item-base));
  --color-success-item-active: color-mix(in srgb, #ffffff 40%, var(--color-success-item-base));
  --color-success-item-disabled: #124330;

  /* WARNING */

  --color-warning-txt-base: #ef7f18;
  --color-warning-txt-hover: color-mix(in srgb, #ffffff 20%, var(--color-warning-txt-base));
  --color-warning-txt-active: color-mix(in srgb, #ffffff 40%, var(--color-warning-txt-base));

  --color-warning-background-selected: color-mix(in srgb, #000000 70%, var(--color-warning-txt-base));
  --color-warning-background-hover: color-mix(in srgb, #000000 60%, var(--color-warning-txt-base));
  --color-warning-background-active: color-mix(in srgb, #000000 50%, var(--color-warning-txt-base));

  --color-warning-txt-item: #261403;
  --color-warning-item-base: #ef7f18;
  --color-warning-item-hover: color-mix(in srgb, #ffffff 20%, var(--color-warning-item-base));
  --color-warning-item-active: color-mix(in srgb, #ffffff 40%, var(--color-warning-item-base));
  --color-warning-item-disabled: #60330a;

  /* DANGER */

  --color-danger-txt-base: #ec535d;
  --color-danger-txt-hover: color-mix(in srgb, #ffffff 20%, var(--color-danger-txt-base));
  --color-danger-txt-active: color-mix(in srgb, #ffffff 40%, var(--color-danger-txt-base));

  --color-danger-background-selected: color-mix(in srgb, #000000 70%, var(--color-danger-txt-base));
  --color-danger-background-hover: color-mix(in srgb, #000000 60%, var(--color-danger-txt-base));
  --color-danger-background-active: color-mix(in srgb, #000000 50%, var(--color-danger-txt-base));

  --color-danger-txt-item: #fff0f1;
  --color-danger-item-base: #be1621;
  --color-danger-item-hover: color-mix(in srgb, #000000 20%, var(--color-danger-item-base));
  --color-danger-item-active: color-mix(in srgb, #000000 40%, var(--color-danger-item-base));
  --color-danger-item-disabled: #4c090d;
}
